<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>bankNum</title>  
    <style>
        .box{
            margin-top:200px;
            text-align: center;
        }
        .bankNumStyle{
            width: 150px;
            height: 20px;
            line-height: 20px;  
            color: #ccc;
            font-size: 14px;
            vertical-align: middle;
            padding: 4px 10px 5px;
        }
        .bankTip{
            min-width:150px;
            _width:160px;   /*for ie 6*/
            height: 20px;
            background-color: #ffffe4;
            padding: 4px 10px 5px;
            vertical-align: middle;
            position: absolute;
            display: none;
            border: 1px solid #ccc;
            font-weight: bold;
            font-size: 18px;
            zoom:1;
        }
    </style>
</head>  
<body>
    <div class="box">
        <input class="bankNumStyle" id="bankNum" type="text" value="请输入卡号或存折号">
    </div>
    <script type="text/javascript">
        var addHandler = (function(){  //事件绑定，且只做一次判断在，加载时
            if(document.addEventListener){
                return function(elem, type, handler){
                    return elem.addEventListener(type, handler, false);
                }   
            }else if(document.attachEvent){  //ie 
                return function(elem, type, handler){
                    return elem.attachEvent('on'+type,function(){
                        handler.apply(elem, arguments);    //修复this的指向
                    });
                }
            }else{
                return function(elem, type, handler){
                    elem["on"+type]=handler;
                }
            }
        })();

        var $ = function(id){
            return document.getElementById(id);
        };

        (function(){
            var four = function(str){
                if(!str)return "";
                var i = 0, result = "";
                if(str[0]){
                    do{
                        result += str[i];
                        i++;
                        if(i % 4 == 0){
                            result += " ";
                        } 
                    }while(str[i]);
                }else{    //兼容ie 6 7 不支持字符串数组
                    for(len = str.length == 0 ? 0 : str.length-1; i <= len; i++){
                        result += str.substr(i, 1);
                        if(i > 0 && (i + 1) % 4 == 0){
                            result +=" ";
                        } 
                    }
                }
                return result;
            };

            BankNum = function(targetEle){
                this.targetEle = targetEle;
                this.num = "";
            };

            BankNum.prototype = {
                init : function(){
                    this.createTip();
                    this.addEvent();
                },

                createTip: function(){
                    this.tipEle = document.createElement("div");
                    this.tipEle.className = "bankTip";
                    this.tipEle.id = this.targetEle.id + "tip";
                    document.body.appendChild(this.tipEle);
                },

                showTip: function(e){
                    this.tipEle.style.display = "block";
                    $(this.tipEle.id).style.left =  e.offsetLeft + "px";
                    $(this.tipEle.id).style.top = ( e.offsetTop - 32) + "px";
                    if (navigator.userAgent.indexOf("MSIE 6.0") > 0 || navigator.userAgent.indexOf("MSIE 7.0") > 0 ) {  //简易的判断ie6
                        $(this.tipEle.id).style.left =  (e.offsetLeft +10) + "px";
                        $(this.tipEle.id).style.top = ( e.offsetTop - 17) + "px";
                    }
                },

                hideTip: function(){
                    this.tipEle.style.display = "none";
                },

                addEvent: function(){
                    var that = this;
                    addHandler(that.targetEle, "mousedown", function(e){
                        if(this.value == "请输入卡号或存折号"){
                            this.value = "";
                        }
                        e = e || window.event; 
                        that.showTip(e.target || e.srcElement);
                        this.style.color = "#000";
 
                    });

                    addHandler(that.targetEle, "blur", function(){
                        if(this.value == ""){
                            this.value = "请输入卡号或存折号";
                            this.style.color = "#ccc";
                        }else{
                            this.value = four(that.num) || "";
                        }
                        that.hideTip();
                    });

                    addHandler(that.targetEle, "input", function(){
                        that.tipEle.innerHTML = four(that.num = this.value.replace(/\s/g,""));
                    });

                    that.targetEle.onpropertychange = function(){  //for ie6 7
                        that.tipEle.innerHTML = four(that.num = that.targetEle.value.replace(/\s/g,""));
                    }; 
                }
            };
        })();

        var test = new BankNum($("bankNum"));
        test.init();

    </script>
</body>  
</html>  